<template>
  <div class="unit-list-wrapper" style="position: relative">
    <div class="search-wrapper f-search-wrapper">
      <el-input v-model="filterText" placeholder="单位名称"/>
    </div>
    <el-tree
        :expand-on-click-node="false"
        auto-expand-parent
        ref="treeRef"
        class="filter-tree"
        :data="units"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode">
      <template v-slot="{ node, data }">
        <div class="node-item" @dblclick="() => selectUnit(data)">
          {{ data.unitName }}
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
import FList from '@/components/FList';
import {getAction} from '@/request/BaseRequest';
import {guid, listToTrees} from '@/utils/CommonUtils';
import {UserConfig} from '@/components/UserSelectorModal/DefaultUserConfig';
import {ElMessageBox} from 'element-plus';

export default {
  name: "UnitList",
  components: {
    FList
  },
  data() {
    return {
      loading: false,
      filterText: undefined,
      selectedKey: undefined,
      units: [],
      defaultProps: {
        children: 'children',
        label: 'unitName',
      }
    };
  },
  mounted() {
    this.loadUnits();
  },
  methods: {
    setUnits(units) {
      this.units = listToTrees(units);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.unitName.includes(value);
    },
    loadUnits() {
      this.loading = true;
      getAction('/base/loadUnits').then(data => {
        if (data.success) {
          if (!data.result) data.result = [];
          this.setUnits(data.result);
        } else {
          this.$notification.error({message: data.message, result: data.result, duration: 3});
        }
        this.loading = false;
      })
    },
    selectChange(unit) {
      this.selectedKey = unit.id;
    },
    selectUnit(unit) {
      this.createUnitSelection(unit);
    },
    createUnitSelection(unit) {
      let userConfig = JSON.parse(JSON.stringify(UserConfig));
      userConfig.type = 'unit';
      userConfig.unitId = unit.id;
      userConfig.unitName = unit.unitName;
      userConfig.configName = unit.unitName;
      userConfig.id = guid();
      userConfig.containSubUnit = true;

      if (unit.children && unit.children.length >= 1) {
        ElMessageBox.confirm('是否包含下级单位?', 'Warning', {
          showClose: false,
          confirmButtonText: '包含',
          cancelButtonText: '不包含',
          type: 'info',
        }).then(() => {
          userConfig.configName += '(包含下级)';
          userConfig.containSubUnit = true;
          this.$emit('create', userConfig);
        }).catch(() => {
          userConfig.containSubUnit = false;
          userConfig.configName += '(不包含下级)';
          this.$emit('create', userConfig);
        });
      } else {
        this.$emit('create', userConfig);
      }
    },
  },
  watch: {
    filterText(filterText) {
      this.$refs.treeRef.filter(filterText);
    },
  }
};
</script>

<style scoped>
.search-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
}

.unit-list-wrapper {
  height: 100%;
  overflow: auto;
  background: white;
}

.node-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
